<template>
  <div>
    <div class="title">
      <div class="item">文章ID</div>
      <div class="item">文章标题</div>
      <div class="item">文章标签</div>
      <div class="item">作者</div>
      <div class="item">操作</div>
    </div>
    <div class="content" v-for="(obj, index) in articleList" :key="index">
      <div class="item">{{ obj.id }}</div>
      <div class="item">{{ obj.title }}</div>
      <div class="item">{{ obj.label }}</div>
      <div class="item">{{ obj.author }}</div>
      <div class="item">
        <mybutton class="edit-btn">编辑</mybutton>
        <mybutton class="delete-btn" @click="deleteArticle(index)"
          >删除</mybutton
        >
      </div>
    </div>
  </div>
</template>

<script>
import mybutton from "../lesson8/mybutton.vue";
export default {
  components: { mybutton },
  data() {
    return {
      artic,
      articleList: [
        {
          id: "001",
          title: "习近平谈治国理政",
          label: "政治",
          author: "习近平",
          checked: false,
        },
        {
          id: "002",
          title: "明朝那些事儿",
          label: "历史",
          author: "当年明月",
          checked: false,
        },
        {
          id: "003",
          title: "Vue3.x",
          label: "计算机",
          author: "尤雨溪",
          checked: false,
        },
      ],
    };
  },
  methods: {
    addArticle(item) {
      this.articleList.push(item);
    },
    deleteArticle(index) {
      this.articleList.splice(index, 1);
    },
  },
};
</script>

<style scoped>
.title {
  display: flex;
  background: #f2f2f2;
  border-bottom: 1px solid #eee;
  padding: 0 10px;
  text-align: center;
}

.content {
  display: flex;
  background: white;
  border-bottom: 1px solid #eee;
  padding: 0 10px;
  text-align: center;
}
.item {
  flex: 1;
  height: 50px;
  line-height: 50px;
}
</style>